<?php /*a:3:{s:63:"D:\phpstudy_pro\WWW\oldi-erp\app\admin\view\logistics\rule.html";i:1747994173;s:62:"D:\phpstudy_pro\WWW\oldi-erp\app\admin\view\public\header.html";i:1747733208;s:61:"D:\phpstudy_pro\WWW\oldi-erp\app\admin\view\public\style.html";i:1747733208;}*/ ?>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ERP</title>

    <link rel="stylesheet" href="/static/css/element-ui@2.15.14.css">
    <script src="/static/js/vue.js"></script>
    <script src="/static/js/element-ui@2.15.14.js"></script>
    <script src="/static/js/axios.js"></script>
    <script src="/static/js/qs.js"></script>
    <script src="/static/js/config.js"></script>
    <script src="/static/js/echart.js"></script>




<style>
    html,
    body,
    #app {
        padding: 0;
        margin: 0;
    }    
    #contenr{
        padding: 0;
        margin: 10px;
    }
</style>

<body>
    <div id="app"  v-cloak>
        <div id="contenr">       
        <el-breadcrumb separator="/">
            <el-breadcrumb-item>首页</el-breadcrumb-item>
            <el-breadcrumb-item>物流管理</el-breadcrumb-item>
            <el-breadcrumb-item>快递规则列表</el-breadcrumb-item>
        </el-breadcrumb>
        <br>
            <el-card >
                <div style="display: flex;align-items: center;justify-content: flex-start;">                    
                
                    <div style="margin-left: auto;margin-bottom: 20px;margin-right: 20px;" >
                            <el-button  type="primary"   @click="create" size="small"  icon="el-icon-edit" >添加快递规则</el-button>       
                    </div>
                </div>  
                   <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick" >
                
                         <el-tab-pane v-for="(item, index) in storagelist" :key="index" :label="item.name"  :name="index">
                            <el-table :data="tablelist"   style="width: 98%;margin-bottom: 20px;"  row-key="id"  border >
                                <el-table-column   prop="id" label="ID" width="80"> </el-table-column>
                                <el-table-column   prop="platform" label="平台名称" > </el-table-column>  
                                <el-table-column   prop="name" label="规则名字" > </el-table-column>  
                                <el-table-column   prop="name_En" label="快递代码" ></el-table-column>   
                                <el-table-column   prop="name_Cn" label="快递名称" ></el-table-column>   
                                <el-table-column   prop="sort" label="快递规则排序"  width="110"></el-table-column> 
                                <el-table-column   prop="countrys" label="国家" width="250" > </el-table-column>    
                                <el-table-column   prop="status"  label="规则状态" width="150"> 
                                    <template v-slot="{row}" >
                                        <span v-if="row.is_user===1">
                                            <el-tag type="success">启用</el-tag>
                                        </span>
                                        <span   v-if="row.is_user===0">
                                            <el-tag type="danger">禁用</el-tag>                                                
                                        </span>
                                    </template>          
                                </el-table-column>
                                <el-table-column   prop="createtime" label="添加时间" width="180"> </el-table-column>  
                                <el-table-column  label="操作" width="280">
                                    <template v-slot="{row}">
                                        <el-button type="primary"  plain  icon="el-icon-edit"  @click="editor(row)" >编辑 </el-button>                                            
                                    </template>
                                </el-table-column>
                            </el-table>    
                            <!-- page -->
                            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="searchForm.pagenum" :page-sizes="[20,50,100, 150, 300,500,1000,2000]"
                                :page-size="searchForm.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
                            </el-pagination>  
                        </el-tab-pane>                       
                    </el-tabs>               
           
            </el-card>


              <!-- 修改编辑弹窗 -->
            <el-dialog :title="title" :visible.sync="isruleVisible " width="900px" :close-on-click-modal="false">
                     	<el-form :model="createForm" :rules="RuleRule" ref="refsearchForm" label-width="100px" size="medium"   >
                        <div style="margin-top: -30px;">
                            <el-card class="box-card">
                                <el-row>
                                    <el-col :span="24">
                                        <h4 >快递信息</h4>
                                    </el-col>
                                    <el-col :span="24">                           

                                        <el-form-item label="物流商" prop="p_id" >
                                            <el-select v-model="createForm.p_id" clearable filterable placeholder="请选择物流商" @change="getLogistics" style="width: 300px;">
                                                <el-option v-for="item in provider" :key="item.id" :label="item.name_Cn" :value="item.id"></el-option>
                                            </el-select>
                                        </el-form-item>
                                        <el-form-item label="快递渠道" prop="code" >                                            
                                            <el-select v-model="createForm.code" clearable filterable placeholder="请选择快递渠道" style="width: 300px;" >
                                                <el-option  v-for="item in logistics" :key="item.code" :label="item.name" :value="item.code">     
                                                    	<span style="float: left">{{ item.name }}</span>
      							          	            <span style="float: right; color: #8492a6; font-size: 13px">{{ item.code }}</span>					                                              
                                                </el-option>
                                            </el-select>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            </el-card>

                            <el-card class="box-card"  style="margin-top: 20px; margin-bottom: 20px;">
                                <el-row>
                                    <el-col :span="24">
                                        <h4 >快递规则</h4>
                                    </el-col>
                                    <el-col :span="24">
                                        
                                        <el-form-item label="适用仓库" prop="storage_id">
                                            <template> 
                                                <el-select v-model="createForm.storage_id" clearable filterable placeholder="请选择快递渠道" style="width: 300px;" >
                                                    <el-option  v-for="item in storagelist" :key="item.id" :label="item.name" :value="item.id">                                                  
                                                    </el-option>
                                                </el-select>
                                            </template>
                                        </el-form-item>

                                        <el-form-item label="适用平台" prop="platform">
                                            <template>                                        
                                                <el-checkbox-group   v-model="createForm.platform">
                                                        <el-checkbox v-for="item in platform" :key="item" :label="item" >
                                                                    {{item}}
                                                            </el-checkbox>                                              
                                                    </el-checkbox-group>                                            
                                            </template>
                                        </el-form-item>

                                        <el-form-item label="规则排序" prop="sort" >
                                            <div style="display: flex;">
                                                <el-input type="number" v-model="createForm.sort" style="width:280px;" clearable placeholder="请输入规则排序"></el-input>
                                                <span style="color: #909399; font-size: 12px; margin-left: 8px">规则的优先级排序，数字越小优先级越高</span>
                                            </div>
                                        </el-form-item>

                                        <el-form-item label="最高限重(g)" prop="maxweight">
                                            <el-input v-model="createForm.maxweight" style="width: 280px;" clearable placeholder="请输入最高限重，可放空"></el-input>
                                            <span style="color: #909399; font-size: 12px; margin-left: 8px">以 g 为单位，放空表示不限制</span>
                                        </el-form-item>

                                        <el-form-item label="适用国家" prop="country" >
                                            <div style="display: flex;">
                                            <el-input v-model="createForm.country" style="width:280px;" clearable placeholder="请输入国家英文缩写，可放空"></el-input>
                                            <span style="color: #909399; font-size: 12px; margin-left: 8px">使用国家英文缩写，多国家用逗号分隔（例：US,GB,CN）</span>
                                            </div>
                                        </el-form-item>

                                        <el-form-item  label="快递规则状态:">                                  
                                            <el-radio-group v-model="createForm.is_user"  style="margin-left: 10px;" >         
                                                <template>            
                                                <el-radio :label="1"  >正常</el-radio>   
                                                <el-radio :label="0"  >关闭</el-radio>                     
                                            </template>
                                            </el-radio-group>                
                                        </el-form-item>                                  
                                    </el-col> 
                                </el-row>
                            </el-card>
                        </div>
                                             
                    <el-form-item>
                        <el-button type="primary" @click="checkSubmits">确认</el-button>
                        <el-button type="primary" plain @click="close"> 取消</el-button>
                    </el-form-item>
                </div>
                </el-form>
            </el-dialog>   
    </div>

    <script>
        new Vue({
            el: '#app',
            data: function () {
                return {       
                    title:'',           
                    isruleVisible:false,//控制配置弹窗
                    status:[
                        {
                            value: 2,
                            label: '禁用'
                        },
                        {
                            value: 1,
                            label: '正常'
                        }
                    ],
                    // 状态是否正常      
                
                    total:0,   //分页总页数      
                    tablelist:[] ,     
                    platform:<?php echo $platform; ?>,//平台列表         
                    searchForm: {                              
                        name_Cn: '',                                             
                        status: '',         
                        pagesize: 20,
                        pagenum: 1,
                        
                    }, 
                    storagelist:<?php echo $storagelist; ?>,//仓库id
                    provider:<?php echo $provider; ?>,//物流商id
                    logistics:[],//快递渠道
                    activeName: '1',                   
                
                    createForm:{
                        p_id:'',          
                        maxweight:'',                      
                        status: '', 
                        code:'',  
                        country:'',                  
                        platform:[],           
                    },
                    RuleRule: {
                       platform: [
                            { type: 'array', required: true, message: '请至少选择一个平台', trigger: 'change'  },
                        ],  
                        code: [
                            { required: true, message: '请选择快递代号', trigger: 'change' },
                        ],   
                        storage_id   : [
                            { required: true, message: '请选择仓库', trigger: 'change' },
                        ],   
                        p_id   : [
                            { required: true, message: '请输入服务商商', trigger: 'change' },
                        ],          
                    }
                }
            },
            mounted(){        
                this.getSearch()
            },
            methods: {        

                async getDatalist() {
                    const res = await axios.post('/admin/logistics/provider', {params: this.searchForm})
                        if (res.status !== 1) {
                            return this.$message.error(res.info);
                        }
                    this.total = res.info.total
                    this.tablelist = res.info.list
                },
                    
                handleSizeChange(newSize) {
                    this.searchForm.pagesize = newSize
                    this.getDatalist()
                },
                handleCurrentChange(newPage) {
                    this.searchForm.pagenum = newPage
                    this.getDatalist()
                },              
                getSearch() {
                    this.searchForm.pagenum = 1
                    this.getDatalist()
                },        
                //编辑
                editor(row){         
                    this.title = '编辑快递服务商'
                    this.isproviderVisible = true             
                    this.createForm=JSON.parse(JSON.stringify(row));                                    
                },
                //添加快递规则
                create(){
                    this.title = '添加快递规则'
                    this.isruleVisible = true
                    this.createForm.id = ''
                    this.createForm.is_user = 1         
                    this.createForm.code = ''        
                    this.createForm.p_id = ''           
                },      
                //确认提交修改
                async checkSubmits(){
           
                    this.$refs.refsearchForm.validate(async valid => {
                        if (!valid) return;
                        let loading = this.$loading({
                            lock: true,
                            text: '数据加载中···',
                            spinner: 'el-icon-loading',
                            background: 'rgba(0, 0, 0, 0.7)'
                            });
                        axios.post('/admin/logistics/rule_create', {params: this.createForm}).then(res => {
                            loading.close()
                            if (res.status !== 1) {
                                return this.$message.error(res.info);                  
                            }
                        
                            this.$message.success('操作成功');
                            this.isproviderVisible = false
                            this.getDatalist()
                        }).catch(err => {
                            console.log(err)
                        })
                    })
                },  
                 handleClick(tab, event) {
                    console.log(tab.name);
                },             
                //    
                //关闭弹窗
                close(){
                    this.isruleVisible=false  
                },
                //通过切换物流商获取快递渠道
                async getLogistics(row){
                   const res = await axios.post('/admin/logistics/channel_list', {params: {p_id: row,type:1}})
                        if (res.status !== 1) {
                            return this.$message.error(res.info);
                        }
                    this.logistics = res.info
                }           
                
                
            }
        })
    </script>
 </body> 
</html>
